<template>
  <div class="paste-test-event">
    <h1>{{ message }}</h1>
    <p>在操作表格粘贴中，必然会遇到需要带合并单元格的操作，复制Excel的时候比较完美，但是在mac 下的 numbers 会出现自动合并空的tr 现象，也就是我们获取到的table 和实际的行数列数不符，这种就需要我们自己去整理。下面直接上代码吧，望斧正。</p>
    <section>
        <code>
            <pre>
    parseDom = function (arg) {
        // 在 mac numbers 下
        // new DOMParser().parseFromString 
        // 有时会转丢 tr
        // objE.querySelector('table'); 也会
        // 原因 会合并连续多个空的tr
        var objE = document.createElement("div");
        objE.innerHTML = arg;

        return objE.querySelector('table');
    }
    getMergeInfo = (tableDom, textList) =&gt; {
        // 会合并连续多个空的tr
        // 需要去添加整理
        // textList 用于补全mac 下被合并的table
        if (!tableDom) {
            return [];
        }
        const $trs = Array.from(tableDom.querySelectorAll('table tr'));

        // 开始填充被舍掉的内容
        if (textList.length != tableDom.length) {
            var $tr = document.createElement('tr');
            for (var i = 0; i &lt; textList.length; i++){
                if (!$trs[i]) {
                    // 只要没有就塞一个
                    $trs.splice(i, 0, $tr);
                } else if (textList[i].replace(/\s+/g, "") != $trs[i].innerText.replace(/\s+/g, "")) {
                    // 只要不一样就塞一个
                    $trs.splice(i, 0, $tr);
                }
            }
        }
        // 开始整理merge 信息
        var tableInfo = $trs.map(item =&gt; {
            return Array.from(item.querySelectorAll('td'));
        });

        var mergeInfo = [];
        var $td = document.createElement('td');

        for (var j = 0; j &lt; tableInfo.length; j++) {
            // 遍历行
            var $tds = tableInfo[j];

            for (var i = 0; i &lt; $tds.length; i++){
                // 遍历列
                var colspan = $tds[i].getAttribute('colspan') || 0;
                var rowspan = $tds[i].getAttribute('rowspan') || 0;

                var info = {
                    row: j,
                    col: i,
                };

                if (colspan) {
                    var m = 1;
                    while (m &lt; colspan) {
                        $tds.splice(i+m, 0, $td);
                        m += 1;
                    }
                    info.colspan = colspan;
                }

                if (rowspan) {
                    // 从当前行下一行开始
                    var n = 1;
                    
                    while (n &lt; rowspan) {
                        var _item = tableInfo[j + n];
                        if (_item) {
                            _item.splice(i, 0, $td);
                            if (colspan) {
                                var m = 1;
                                while (m &lt; colspan) {
                                    _item.splice(i+m, 0, $td);
                                    m += 1;
                                }
                            }
                        }
                        
                        n += 1;
                    }
                    info.rowspan = rowspan;
                }

                if (rowspan || colspan) {
                    mergeInfo.push(info);
                }
            }
        }
            
        return mergeInfo;
    }

    getMergeInfo(parseDom(e.clipboardData.getData('text/html'),'application/xml'), e.clipboardData.getData('text').split('\n'));
    // 可以得到完整的merge 信息，进行合并操作
            </pre>
        </code>
    </section>
    <p class="page-end">The End</p>
  </div>
</template>

<script lang="ts">
    import Vue from 'vue';
    import Component from 'vue-class-component';

    @Component({
        // 所有的组件选项都可以放在这里
    })
    export default class pasteTest extends Vue {
        // data 在这
        message: string = '粘贴table时mac numbers 会合并多个相邻的空tr'
    }
</script>
<style lang="scss">
.paste-test-event{
}
</style>